﻿<div ng-if="pager.totalItemsCount > 0" class="sustainalytics-pager">
    <div class="pagination-summary">
        <span>{{ pager.pagingOptions.pageIndex * pager.pagingOptions.pageSize > pager.totalItemsCount ? pager.totalItemsCount : pager.pagingOptions.pageIndex * pager.pagingOptions.pageSize }}</span>
        <span class="pagination-summary-separator">of</span>
        <span>{{ pager.totalItemsCount }}</span>
    </div>
    <div class="pagination-pages">
        <a href="" ng-if="pager.visiblePagesFrom > 1" ng-click="pager.goTo(1);" class="pagination-page" ng-class="{ 'pagination-page-set-first': pager.visiblePagesFrom <= 2 }">1</a>
        <a href="" ng-if="pager.visiblePagesFrom > 2" ng-click="pager.prevSet();" class="pagination-prevSet">...</a>
        <a href="" ng-repeat="page in pager.visiblePagesArray" class="pagination-page pagination-page-set" ng-class="{ 'pagination-page-active': page == $parent.pager.pagingOptions.pageIndex, 'pagination-page-set-first': $first && ($parent.pager.visiblePagesFrom > 2 || $parent.pager.visiblePagesFrom == 1), 'pagination-page-set-last': $last && ($parent.pager.visiblePagesTo < $parent.pager.totalPageCount - 1 || $parent.pager.visiblePagesTo == $parent.pager.totalPageCount) }" ng-click="$parent.pager.goTo(page);">{{ page }}</a>
        <a href="" ng-if="pager.visiblePagesTo < pager.totalPageCount - 1" ng-click="pager.nextSet();" class="pagination-nextSet">...</a>
        <a href="" ng-if="pager.visiblePagesTo < pager.totalPageCount" ng-click="pager.goTo(pager.totalPageCount);" class="pagination-page" ng-class="{ 'pagination-page-set-last': pager.visiblePagesTo >= pager.totalPageCount - 1 }">{{ pager.totalPageCount }}</a>
    </div>
    <div class="pagination-size">
        <span>Per page </span>
        <select class="select-box" id="pageSize" name="pageSize" ng-model="pager.pagingOptions.pageSize">
            <option value="20" selected="selected">20</option>
            <option value="50">50</option>
            <option value="100">100</option>
        </select>
    </div>
</div>